// src/nodes/AgentNode.jsx
import React from 'react';
import { Handle } from 'reactflow';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faRobot,
  faTools,
  faCopy
} from '@fortawesome/free-solid-svg-icons';

const AgentNode = ({ id, data }) => {
  const copyNodeId = () => {
    navigator.clipboard.writeText(id)
      .catch(err => console.error('Failed to copy:', err));
  };
  return (
    <div className="agent-node p-4 w-80 rounded-lg bg-white border-2 border-blue-100 shadow-md cursor-pointer transition-all hover:border-blue-300 relative">
      <div className="flex items-center gap-2">
        <FontAwesomeIcon 
          icon={faRobot} 
          className="text-blue-500 text-lg"
        />
        <div className="min-w-0 flex-1">
          <h3 className="font-semibold text-gray-800 truncate">{data.label}</h3>
          <div className="flex items-center gap-1 text-xs text-gray-500 mt-1">
            <p className="overflow-hidden truncate">nodeID: {id}</p>
            <FontAwesomeIcon 
              icon={faCopy}
              className="text-gray-400 hover:text-blue-500 cursor-pointer ml-1"
              onClick={(e) => {
                e.stopPropagation();
                copyNodeId();
              }}
              title="复制节点ID"
            />
          </div>  
          <p
            className="text-xs text-gray-500 mt-1 overflow-hidden truncate"
          >
            {data.desc}
          </p>
          <p
            className="text-xs text-gray-500 mt-1 overflow-hidden truncate"
          >
            temperature: {data.temperature}
          </p>
          <p
            className="text-xs text-gray-500 mt-1 overflow-hidden truncate"
          >
            maxToken: {data.maxPrompt}
          </p>
        </div>
      </div>

      {/* 绿色普通输入 */}
      <div >
        <Handle
          id="input"
          type="target"
          position="left"
          className="!w-4 !h-4 !bg-green-500 !border-white"
        />
      </div>

      {/* 橙色工具输入 */}
      <div className="absolute left-1/2 top-3 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center gap-1">
        <Handle
          id="tools"
          type="target"
          position="top"
          className="!w-4 !h-4 !bg-orange-500 !border-white !-translate-y-1/2"
        />
        <FontAwesomeIcon
          icon={faTools}
          className="text-orange-500 text-xs"
        />
      </div>

      {/* 蓝色输出 */}
      <div>
        <Handle
          id="output"
          type="source"
          position="right"
          className="!w-4 !h-4 !bg-blue-500 !border-white"
        />
      </div>
    </div>
  );
};

export default AgentNode;